<html>
<head>
<title>ReadyMap WebGL</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="../js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../build/readymap-debug-0.0.1.js"></script>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

<link href="demo.css" rel="Stylesheet" type="text/css"></link>
<link href="../css/readymap.css" rel="Stylesheet" type="text/css"></link>

<style type="text/css">
  .map-container
  {
  	position:relative;
  	width: 50%;    		
  	height: 100%;
  	float:left;
  }    
  
  #Help
  {
  	position: absolute;
  	left: 10px;
  	top: 100px;  	
  }
</style>

<script type="text/javascript">

    var mapView;
    var map;
    var olMap;


    function addWMSLayer(name, url, layers, format, isBaseLayer) {

        //Add the layer to the ReadyMap map
        map.addImageLayer(new ReadyMap.WMSImageLayer({
            name: name,
            url: url, 
            layers: layers,
            format: format
        }));
        
        //Add the layer to the OpenLayers map
        olMap.addLayer(new OpenLayers.Layer.WMS(name, url, { layers: layers, format: format }, { isBaseLayer: isBaseLayer, tileSize: new OpenLayers.Size(256, 256) }));
    }

    ReadyMap.init(function() {

        // create a map model:
        map = new ReadyMap.Map();

        //Initialze the OpenLayers map
        var options = { numZoomLevels: 25,
            maxResolution: 1.40625 / 2,
            controls: [new OpenLayers.Control.Navigation(),
                                  new OpenLayers.Control.ZoomPanel({ position: new OpenLayers.Pixel(10, 10) }),
                                  new OpenLayers.Control.LayerSwitcher()]
        };
        olMap = new OpenLayers.Map("OpenLayersContainer", options);
        olMap.events.register("move", olMap, function() {
            var locked = jQuery("#lockTo2DView").attr("checked");
            if (locked) {
                var bounds = olMap.getExtent();
                var center = bounds.getCenterLonLat();
                var width = bounds.getWidth();
                var height = bounds.getHeight();
                var diameter = width;
                if (height < width) {
                    diameter = height;
                }
                radius = diameter * 0.5;
                var range = ((.5 * radius) / 0.267949849) * 111000.0;
                if (range != 0)
                    mapView.viewer.manipulator.setViewpoint(center.lat, center.lon, 0.0, 0, -90, range);
            }
        });


        addWMSLayer("Landsat", "http://readymap.org/readymap/tiles", "22", "image/jpeg", true);
        addWMSLayer("OSM", "http://readymap.org/readymap/tiles", "35", "image/png", false);


        // create a view tied to a page element:
        var size = ReadyMap.getWindowSize();
        var headerHeight = jQuery('#header').height();
        size.w = size.w / 2.0;
        size.h -= headerHeight;
        mapView = new ReadyMap.MapView("3DView", size, map);

        //Add some controls
        var zoom = new ReadyMap.Controls.Zoom(mapView, "ReadyMapContainer");
        var pan = new ReadyMap.Controls.Pan(mapView, "ReadyMapContainer");


        //olMap.zoomToMaxExtent();
        olMap.zoomTo(1);

        // display the Lat/Long:
        mapView.addFrameEndCallback(function() {
            var viewMatrix = mapView.viewer.view.getViewMatrix();
            viewMatrix = osg.Matrix.inverse(viewMatrix);
            var eye = [];
            osg.Matrix.getTrans(viewMatrix, eye);
            var lla = map.profile.ellipsoid.ecef2lla(eye);
            lla[0] = Math.rad2deg(lla[0]);
            lla[1] = Math.rad2deg(lla[1]);
            jQuery("#Coords").html(
                "Lat: " + lla[1].toFixed(2) + "\u00B0" + "  Long = " + lla[0].toFixed(2) + "\u00B0" + "<br/>" +
                "Azim: " + Math.rad2deg(mapView.viewer.manipulator.localAzim).toFixed(1) + "\u00B0" +
                "  Pitch:" + Math.rad2deg(mapView.viewer.manipulator.localPitch).toFixed(1) + "\u00B0" + "<br/>" +
                "Tiles: " + map.drawListSize);
        });
    });

</script>
</head>

<body>
  <div id="header">
    <a href="http://pelicanmapping.com" border="0"><img id="logo" align="right" height="50" src="http://pelicanmapping.com/wp-content/uploads/2011/02/pelican-logo-262x93-light.png" /></a>
    <p>
        ReadyMap / WebGL :: 
        <a href="index.html">demos</a> ::
        <a href="http://godzi.org">wiki</a> :: 
        <a href="http://github.com/gwaldron/godzi-webgl">github</a> ::
        <a href="http://twitter.com/#!/pelicanmapping">twitter</a>
    </p>
  </div>
  <div id="maps">
    <div id="ReadyMapContainer" class="map-container">
      <canvas id="3DView"></canvas>
    </div>
    <div id="OpenLayersContainer" class="map-container">
    </div>
  </div>
  <div id="Help">
    <ul>
      <li>drag to pan</li>
      <li>wheel to zoom</li>
      <li>shift-drag to rotate</li>
      <li><a href="#" onclick="mapView.home();">reset view</a></li>      
      <li><input id="lockTo2DView" type="checkbox" checked="checked"/>Lock to 2D View</li>
    </ul>
  </div>
  <div id="Coords">
  </div>
</body>

</html>
